<!--
 * @Author: C.
 * @Date: 2023-05-31 09:42:51
-->
<template>
  <PageWrapper title="WebSocket 示例">
    <div class="flex">
      <div class="w-1/3 bg-white p-4">
        <hr class="my-4" />
        <p class="text-lg font-medium mt-4">设置</p>
        <Input v-model:value="currentMsg.ToUserId" />
        <hr class="my-4" />

        <Textarea
          placeholder="需要发送到服务器的内容"
          v-model:value="currentMsg.Content"
          allowClear
        />

        <a-button type="primary" block class="mt-4" @click="handlerSend"> 发送 </a-button>
      </div>

      <div class="w-2/3 bg-white ml-4 p-4">
        <span class="text-lg font-medium mr-4"> 消息记录: </span>
        <hr class="my-4" />

        <div class="max-h-80 overflow-auto">
          <ul>
            <li v-for="item in getList" class="mt-2" :key="item.SendTime">
              <div class="flex items-center">
                <span class="mr-2 text-primary font-medium">
                  {{ item.FromUser.UserName }}
                </span>
                <span>{{ formatToDateTime(item.SendTime) }}</span>
              </div>
              <div>
                {{ item.Content }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <a-button @click="sendAudit"> 发送模拟审核信息</a-button>

    <Block title="通知">
      <template #extra>
        <a-button type="primary" @click="addUser">添加用户</a-button>
        <a-button @click="sendNotice"> 发送模拟通知</a-button>
      </template>
      <Input v-model:value="noticeMsg.Title" placeholder="标题" />
      <hr class="my-4" />
      <Tag
        style="margin-top: 15px"
        v-for="item in noticeMsg.ToUsers"
        :key="item.UserId"
        color="#108ee9"
      >
        {{ item.UserName }}
      </Tag>

      <hr class="my-4" />
      <Textarea placeholder="通知内容" v-model:value="noticeMsg.Content" allowClear />
    </Block>
    <UserModal v-model:users="noticeMsg.ToUsers" @register="registerModal" width="50%" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { Input, Textarea, Tag } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { formatToDateTime } from '/@/utils/dateUtil';
  // import { useUserStore } from '/@/store/modules/user';
  import { useWsStore } from '/@/store/modules/websocket';
  import { IBackMsg, IFrontMsg } from '/~/utils/wsType';
  import { MsgTypeEnum } from '/@/maps/baseData/msgEnum';
  import { UserModal, useModal } from '/~/components/UserModal';
  import { message_notice } from '/@/api/work/system/message';
  // const userStore = useUserStore();
  const wsStore = useWsStore();
  const recordList = ref<IBackMsg[]>([]);
  const currentMsg = ref<IFrontMsg>({
    Content: 'message',
    Type: MsgTypeEnum.MESSAGE,
    ToUserId: 'cj',
  });

  //   {
  //   "FromUserId": "string",
  //   "ToUserIds": [
  //     "string"
  //   ],
  //   "Content": "string",
  //   "Title": "string"
  // }

  const noticeMsg = ref<Recordable>({
    Content: '今晚7：00，1号会议室开会！请勿迟到',
    Title: '紧急通知',
    ToUsers: [],
  });
  const [registerModal, userModelAction] = useModal();
  const getList = computed(() => {
    return [...recordList.value].reverse();
  });

  function handlerSend() {
    console.log(currentMsg.value, '发文');
    // recordList.value.push({
    //   ...JSON.parse(JSON.stringify(currentMsg.value)),
    //   SendTime: new Date().getTime(),
    // });
    wsStore.sendNessage(currentMsg.value);
  }
  function sendAudit() {
    wsStore.receiveMessages({
      data: JSON.stringify({
        FromUser: {
          UserId: 'cj',
          UserName: 'henry',
          PhotoUrl: null,
          Department: '销售部',
        },
        Content: 'xxx提交的单据等待审核',
        DynamicData: {
          BillId: 'SA230606001',
          BillKey: 'Sa_Order',
        },
        SendTime: new Date(),
        Type: MsgTypeEnum.AUDIT,
      }),
    });
  }
  function addUser() {
    userModelAction.openModal(true, {});
  }
  function sendNotice() {
    message_notice({
      ...noticeMsg.value,
      ToUserIds: noticeMsg.value.ToUsers.map((item) => item.UserId),
    });

    // wsStore.receiveMessages({
    //   data: JSON.stringify({
    //     FromUser: {
    //       UserId: 'admin',
    //       UserName: '部门主管',
    //       PhotoUrl: null,
    //       Department: '销售部',
    //     },
    //     Content: '今晚7：00，1号会议室开会！请勿迟到',
    //     SendTime: new Date(),
    //     Type: MsgTypeEnum.NOTICE,
    //   }),
    // });
  }
</script>
